// 下载引入vue和路由
import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home"
import Login from "../views/Login/index.vue"
import Register from "../views/Register/index.vue"
import Search from "../views/Search/index.vue"
import Trade from "../views/Trade"
import Pay from "../views/Pay"
import PaySuccess from "../views/PaySuccess"
import Center from "../views/Center"
import store from "@/store"
// import Detail from "../views/Detail/index.vue"

// 注册路由
Vue.use(VueRouter)

// 修改原型上的方法
const oldPush = VueRouter.prototype.push // 将原来的方法存起来
const oldReplace = VueRouter.prototype.replace

// 需要传三个参数,location是跳转的路径,resolvecb是成功回调,rejectcb是失败的回调
// 统一解决报错问题
VueRouter.prototype.push = function (location, resolvecb, rejectcb) {
  if (resolvecb === undefined && rejectcb === undefined) {
    //用户没传成功失败的回调情况,手动添加
    oldPush.call(this, location).catch(() => {
      // console.log(this)
      console.log("捕获到了错误")
    })
  } else {
    oldPush.call(this, location, resolvecb, rejectcb)
  }
}
VueRouter.prototype.replace = function (location, resolvecb, rejectcb) {
  if (resolvecb === undefined && rejectcb === undefined) {
    //用户没传成功失败的回调情况,手动添加
    oldReplace.call(this, location).catch(() => {
      // console.log(this)
      // console.log("捕获到了错误")
    })
  } else {
    oldReplace.call(this, location, resolvecb, rejectcb)
  }
}

const router = new VueRouter({
  // 如果需要从当前页面跳转回上个页面,且跳转回上个页面时回到刚刚浏览的位置,需要使用scrollbehavior来控制,
  // 而且必须使用history模式
  model: "history",
  scrollBehavior(to, from, savePositon) {
    // console.log(to, from, savePositon)
    // to 要跳转到哪个页面
    // from : 从哪个页面跳转过来
    // savedPosition: 保存之前页面的位置
    if (savePositon) {
      return savePositon
    } else {
      return { x: 0, y: 0 }
    }
  },
  // 配置路由信息
  routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", name: "home", component: Home },
    {
      name: "login",
      path: "/Login",
      component: Login,
      meta: {
        // 添加路由元,在需要隐藏的组件添加ishiddenfooter:true,属性值为true是隐藏.然后在app根组件中,通过v-show来判断是否展示
        isHiddenFooter: true,
      },
    },
    {
      path: "/Register",
      component: Register,
      isHiddenFooter: true,
    },
    {
      // path: "/Search/:keyword?",
      path: "/Search/:keyword?",
      name: "Search",
      component: Search,
      meta: {
        isHiddenNav: true,
      },
    },
    // 跳转detail详情页
    {
      path: "/detail/:id",
      name: "Detail",
      // 路由懒加载
      component: () => import("@/views/Detail"),
      // 在此处规则当中添加一个props:true属性的时候，就可以在对应的组件中使用props:[]来接收
      // ????
      props: true,
      meta: {
        isHiddenNav: true,
      },
    },
    //跳转添加购物车
    {
      path: "/AddCartSuccess",
      name: "AddCartSuccess",
      component: () => import("@/views/AddCartSuccess"),
    },
    //跳转购物车界面
    {
      path: "/ShopCart",
      name: "ShopCart",
      component: () => import("@/views/ShopCart"),
    },
    //跳转订单详情页面
    {
      path: "/trade",
      name: "Trade",
      component: () => import("@/views/Trade"),
    },
    // 跳转订单中心
    {
      path: "/center",
      name: "Center",
      component: () => import("@/views/Center"),
    },
    {
      name: "trade",
      path: "/trade",
      component: Trade,
    },
    {
      name: "center",
      path: "/center",
      component: Center,
    },
    {
      name: "paysuccess",
      path: "/paysuccess",
      component: PaySuccess,
    },
    {
      name: "pay",
      path: "/pay",
      component: Pay,
    },
  ],
})
// 实现路由守卫,没有权限不能访问某些页面

// 准备一个白名单，这是不需要验证的，是随时可以跳转访问的
const whiteList = ["home", "Search", "Detail", "ShopCart", "AddCartSuccess", "login", "Register"]
//  添加路由守卫  给router对象添加路由全局前置守卫
// 全局前置守卫的执行时机,只要有路径跳转执行这个全局前置守卫
router.beforeEach((to, from, next) => {
  //  to表示要跳转到的页面 login register home  detail  shopcart
  // from 来自于某个页面
  console.log(to, from)
  if (whiteList.includes(to.name) || store.state.user.userList.token) {
    next() // 放行
    // 如果目标路劲是白名单中的,放行,或者用户以登录,那么全部放行
    return // 不要向下执行了
  }
  next({
    // 如果不是白名单,且未登录,那么跳转到登录界面
    name: "login",
    query: {
      redirect: to.path, // 记录一下之前要访问的路径 是为了提高用户体验
      // 一旦用户登录成功,那么重新跳转到之前阻止登录的界面
    },
  })
})

export default router
